<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>KEYSTATION Example</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://keystation.cosmostation.io/lib/keystation.js"></script>
	<!-- <script src="http://localhost:8080/lib/keystation.js"></script> -->
</head>
<body>
	<button onclick="login();">Keystation Login</button>
	<br>
	<br>
	<textarea name="txJson" cols="120" rows="5" placeholder="Replace txJson to your own tx msg." >{"account_number":"18012","chain_id":"cosmoshub-3","fee":{"amount":[{"amount":"5000","denom":"uatom"}],"gas":"200000"},"memo":"","msgs":[{"type":"cosmos-sdk/MsgSend","value":{"amount":[{"amount":"10000","denom":"uatom"}],"from_address":"cosmos1z67fshyr48pa9a6htdz4qd0zullfk6y0fgvxv7","to_address":"cosmos10nv3yj0jdxf02vxyc0tavf97fdvppdth6wmcn3"}}],"sequence":"25"}</textarea>
	<br>
	<br>
	<button onclick="send();">Transfer</button>
	<p>result: <span id="result"></span></p>
	<script>
		var keystation = new Keystation();
		keystation.client = "https://www.mydomain.com";
		keystation.lcd = "https://lcd-cosmos-free.cosmostation.io";
		keystation.path = "44/118/0/0/0";

		// The account parameter is required for users having multiple keychain accounts.
		// Remember it and use to sign a transaction : keystation.openWindow(type, jsonStr, keystationAccount)
		var keystationAccount = "";

		function login() {
			var prefix = "cosmos";
			var popup = keystation.openWindow("signin", prefix);
			var popupTick = setInterval(function() {
				if (popup.closed) {
					clearInterval(popupTick);
					console.log("window closed!");
				}
			}, 500);
		}

		function send() {
			var txJsonStr = $.trim($("textarea").val());
			var popup = keystation.openWindow("transaction", txJsonStr, keystationAccount);
			var popupTick = setInterval(function() {
				if (popup.closed) {
					clearInterval(popupTick);
					console.log("window closed!");
				}
			}, 500);
		}

		window.addEventListener("message", function(e) {
			if (e.origin != "https://keystation.cosmostation.io") return;
			// if (e.origin != "http://localhost:8080") return;
			console.log(e.data);
			// e.data.account : User's keychain account. Remember this account!
			keystationAccount = e.data.account;
			document.getElementById("result").innerHTML = JSON.stringify(e.data);
		} , false);
	</script>
</body>
</html>